There are two tutorials written for the CALUMATH Page Maker: Short Tutorial (18 pages) and Long Tutorial (34 pages). Some features have changed slightly since they were written, however they should be very helpful in getting you started.
To view a list of Math Symbols, click here:Math Symbols.
To view a list of all Mathematical Commands and Operations on Arrays , click here:CaluMath Commands.
If the CALUMATH Page Maker malfunctions: Sometimes you may encounter a bug and the CALUMATH Page Maker malfunctions. All you have to do is save the web page you are constructing, close the CALUMATH Page Maker, reopen the CALUMATH Page Maker, and reload the page you saved using Load Page. If you cannot save your page because View Page is not visible at the top of the CALUMATH Page Maker, click to make it visible. If you click this when the program is working correctly, you will cause the CALUMATH Page Maker to work incorrectly.
For a description of all the items in the Main Menu and Sub-Menus, click .
For help with the CALUMATHPAGEMAKER, click on the links at the left.
CALUMATH has been carefully designed to be compatible with all major web browsers, both recent and older versions. CALUMATH pages should work correctly in the following browsers:
Internet Explorer: Versions 5.5 and later.
Firefox: Versions 1.0 and later.
Opera: Versions 7.5 and later.
Safari: Versions 3.0 and later.
Googe Chrome: recent versions.
Browser Warnings:
Never Use the Back or Forward button of your browser to navigate through CALUMATH pages.
Pop-up windows are an integral part of CALUMATH. Your browser must allow pop-up windows for CALUMATH to function properly.
If you have a slow internet connection, the first time you open an interactive CALUMATH page, it may take about a minute to load. After that, each page should load very quickly.
Constructing CALUMATH pages is done by using the CALUMATH Page Maker. While learning how to use the Page Maker, it is recommended that you use the Firefox web browser to open the CALUMATH Page Maker.
Never Use the Back or Forward button of your browser to navigate through CALUMATH pages.
It is recommended that you use the Firefox web browser to open the CALUMATH Page Maker.
To use the CALUMATH Page Maker, download it to your computer using the link at the top of this page. Do not run it off the web site.
Pop-up windows are an integral part of CALUMATH. Your browser must allow pop-up windows for CALUMATH to function properly.
After spending a long time constructing a web page with the CALUMATH Page Maker, you may notice that the CALUMATH Page Maker will start to run slowly. Simply save your work, close the browser, open the browser again and load the page you saved. The CALUMATH Page Maker will run at its normal speed again.
Internet Explorer Warnings:
Some security settings in Internet Explorer will prevent CALUMATH pages from correctly functioning if the pages are stored on your computer. To correct this, open Internet Explorer, click on the Tools menu at the very top of the page, then Click on Internet Options. This opens up a dialog window. Click the Advanced Tab. Scroll down until you come to the Secutity Section. Make sure there is a check next to Allow active content to run in files on My Computer. Then click the OK button.
While using the CALUMATH Page Maker, when you want to View, Edit, or Cut and Paste the page you are constructing, a window will pop up to allow you do these things. These windows will close automatically at the appropriate time. Do not close them yourself (by X-ing out of them). This is especially important with Internet Explorer, which will cause the CALUMATH Page Maker to run very slowly if windows are closed by the user. The only exception is if a pop-up window has a Close button on it. You can always close a window with a Close button.
When using Internet Explorer with the CALUMATH Page Maker, please close any other Internet Explorer window before opening the CALUMATH Page Maker. This will help Internet Explorer to run more efficiently.
The items at the top of the CALUMATH Page Maker are called Page Controls. With the Page Controls, you can view or edit the page you are currently working on, or load a page that was previously saved.
The drop down menu whose first entry is Text and Html is called the Main Menu. It lists the category of objects you can place in your web page. If you choose a category and click the Continue Button, a new drop down menu appears. It is called the Sub-Menu and lists the specific items you can create in that category. If you choose a specific item and click Continue, you are taken to a screen that has to do with the creation of that specific object. You then fill in the boxes that has to do with that specific object. When you are finished you are exited from that object's screen and you can create a new object by making another choice from the Main Menu.
Example:
As an example, suppose we want to create a button. Select Buttons and Boxes from the Main Menu, click Continue, and then choose Button from the Sub-Menu. When you click Continue, you are taken to a screen for the construction of Buttons. Scroll up and down to see all of the screen. Notice that the screen has two sections. There is a table that deals with Options for buttons. Below it is a table that deals with Required button elements. The Required Table must be filled in. For new users, the Options table can be ignored, since its entries can be left blank or will default to reasonable values. The Required table must be filled in. In the Required table, select
none from the Axes menu, and select
none from the Graph menu. This is because we haven't drawn any graphs or axes yet, so we won't associate the Button to any axes or graphs. Then
enter
MyButton as the name of the button in the Name menu, and enter
Click Me as the button label in Button Label.
This means that in the web page, the words Click Me will appear on the button. Also, the CALUMATH Page Maker will know that the name of the Button is MyButton, so you can refer to it later by using this name.
Then click the Finish Button. When you do, you are returned to the Main Screen with only the Main Menu visible. Click the Page Control View Page at the top of the page and a window will open with the button you created.
When you view the page that contains your button, you will also notice a second button with the label Click Here to Edit Text. This button is used if you want to edit any text, such as titles or paragraphs, that appears on your page. It is placed as a convenience for you and only appears while you are working on your page. It does not appear after you save your page and view it by itself, it only appears when the page is viewed in the CALUMATH Page Maker.
If you click on the Click Me button that you created, what happens? Nothing happens. That is because we do not tell the button what to do when it is clicked. To tell the button what to do, you must create a Button Action. But that will be done in a different help section.
You should open the CALUMATH Page Maker to familiarize yourself with the way it looks. Below is a screen shot of an old version of it. The current version of has received a make-over since then, however the the functionality is very similar to that displayed in the screen shots.
The creation of a CALUMATH web page has a certain pattern that we now describe. The menu that contains the entry Text And Html (shown above) is called the Main Menu. It lists categories of objects that you can create. If you select an entry, for example, Functions And Constants, and click the Continue Button, then a new menu, called a Sub-Menu, appears. A screen shot is shown below.
The Sub-Menu lists the specific objects, in this case, the types of functions and constants you can create. You choose the type of object you want to create, for example, suppose you select Define A Function and click the Continue button as is shown below.
This takes you to a screen that has to do with the creating of functions.
The screens for almost all CALUMATH object, except for text objects, has the same overall style. The blue lettering tells us that we selected Define A Function, so we can use this screen to define a function. There are two tables, each with a grey color. The bottom table contains Required entries and must be filled out. The top table contains Optional entries. These are not required, and can either be left blank or already contain values that produce reasonable results. Therefore, new users can safely ignore the Optional entries. Advanced users will be interested in these values however, since they allow you to carefully tailor your objects exactly as your page demands.
If you wanted to create the function f(x) = x^2, you could enter f in Function Name,
x in Function Variable, and x^2 in Function Definition as is shown in the screen shot below.
After doing so, click the Finish Define A Function button. The Define A Function screen closes and you are returned to the original screen that is shown in the first screen shot above. At this point, the entire process repeats. From the Main Menu, you can select the category of object that you want to create and click the Continue button. A Sub-Menu that depends on the category of object selected appears and you choose the object you want to create.
After creating several objects, you should view the page that you have created to check its progress. This will also give you a chance to save the page that you are creating. At the top of the CALUMATH Page Maker window, click on the View Page button. The page you are constructing will open in a new window. For this particular example, if you view the page after constructing the function f, the page will look blank. This is because we have defined the function f, but we haven't used f to appear in the page, for example, we haven't constructed a graph of f.
When you click the View Page button at the top of the CALUMATH Page Maker window, a new window opens that contains your newly constructed web page. To save your page, after the new window opens and your page is visible, click on the View menu from the menu bar at the top of the page. Then click Page Source (or Source, depending on your browser).
A window will open with the source code (the actual JavaScript and Html commands) that are used to make the page appear as it does. This is what you want to save. Click on the File menu from the menu bar at the top of the page. Then click Save Page As (or Save As, depending on your browser). You must save it in the folder called MyWebPages that is in the CaluMath folder. The name you give the file should have the extension .html.
After saving it, you can close the window with the source code, and you can close the window that contains the new web page that you are constructing. DO NOT CLOSE THE CAS PAGE MAKER PAGE, UNTIL YOU HAVE SAVED THE WEB PAGE YOU WERE CONSTRUCTING, OTHERWISE YOU WILL LOSE ALL OF YOUR WORK.
Here is the second way to save the web pages. When you click the View Page button at the top of the CALUMATH Page Maker window, a new window opens that contains your newly constructed web page. At the same time, a box opens at the bottom of the CALUMATH Page Maker window that contains the source code of the page.
Select all of the text in the box, and copy it.
Open a text editor (for example, Wordpad on Windows machines) and paste it into the text editor.
Using the menu bar of the text editor, save the document in the folder called MyWebPages that is contained in the CaluMath folder. The name you give the file should have the extension .html.
For some browsers, only the second way of saving pages works correctly. Some web browsers, for example, Opera and Safari, do not display the source code for the pages that are dynamically created using the CALUMATH Page Maker, so you cannot save the page using the first method. One other problem, as exibited by more recent versions of Firefox, is that the browser may save the page using the wrong Character Encoding. In this case the browser saves it as a Unicode document instead of a standard text document. This can be rectified by opening the newly saved page in a text editor (for example, Wordpad on Windows machines), and immediately resaving the page, making sure that the type of document you save it as is a Text Document and not a Unicode Document.
The Page Controls are the items at the top of the CALUMATH Page Maker window. Below is a description of all the CALUMATH Page Controls .
Load Page
This button allows you to load a page that you have previously saved. To do this:
Click the Load Page button.
If the file is on the web, type the web address in the textbox and click the the From Web button.
If it is on your computer, click the button labeled either Browse or Select or Choose File (depending on your browser). Choose the file you want to load and click the From The Computer button.
If you click the From The Computer button and get an error, try clicking the From Web button and vice-versa.
A small pop-up box will appear. It reminds you that work on your current page will be lost if you do not save it before loading a new page. Click OK to continue.
The page you want will open and be visible.
If you are currently working on a page and then load a new page, you will lose the work on your current page unless you save it first.
All of the CALUMATH Demo Pages are located in the folder demopages. You can load any of these pages and begin to edit and modify it.
Previous Version
While you are working on a page, each time you view it, CALUMATH stores a copy of that page in its memory. Suppose you then make changes to the page that cause an error, or you make major changes to the page and realize that you've ruined the page. Using the Previous Version button, you can choose to go back to a previous version. Everything in your page will be exactly as it was at the time of the previous version. To do this:
Click the Previous Version button.
An instruction window pops up. It states there is a dropdown menu contains a list of the pages you viewed or edited. Page 0 is the first page you looked at. The last entry is the page before the the most recent page you viewed or edited. Choose the version you want and click the Load This Previous Version button.
If the version that opens is not the one you want, repeat the process and choose a different version.
View Page
Click this to view the page you are currently working on. At the bottom of the page, you will notice a button that says Click Here to Edit Text. This button is not actually part of the page you are creating, but it is placed there as a convenience. If you want to edit any text that appears in the page (even text that is created in response to interacting with the page and clicking on buttons), click the Click Here to Edit Text button and then click on the text you want to edit. You will immediately be taken to the screen to edit that piece of text. One more note about the Click Here to Edit Text button: If you have created several pieces of text which each have the same name (say because they result from a conditional if-else if- else statement), then clicking on the Click Here to Edit Text will take you to a screen to edit one of the text pieces with that name. However it may not be the actual text that you clicked on. In this case, you must edit your text using the Edit Page button.
Edit Page
Click this button to edit the page you are working on. When this button is clicked, a new window that lists all of the elements you constructed is opened. Note that the items you have constructed are listed heirarchically. For example, if you construct a set of axes, all of the graphs that are drawn on the axes when the page loads are placed below the axes. We say that the graphs are "children" of the axes. If you have a Button Action, each item in the Button Action container is considered as a child of the Button Action and is placed below it. The same occurs for New Windows, Routines, Conditionals and For Loops. To edit any item, just click on it. When you do, you will be returned to the screen that was used in the creation of the item. In that screen you can make any adjustments you want. Occasionally, when you click on items, nothing happens. This may occur if you have a large number of programs (other than CALUMATH) open and your computer is operating slowly. If this occurs, just close the newly opened edit window and click on the Edit Page button again. If it continues to occur, you should close the other programs you have running.
Cut And Paste
Click this button to re-arrange items on your page. When this button is clicked, a new window that lists all of the elements you constructed is opened. With your cursor (and only using your cursor), you highlight a section of document that you want to either delete, copy or move. The exact procedure is outlined below.
To delete a section of the document:
Place your cursor on the first item you want to delete (not on the number preceeding it) and hold the left mouse button down. Drag the cursor down over the document and lift the button over the final item you want to delete. The beginning and ending items must be "at the same level" of the document, in other words, they must be top level items of the document or they must be children of the same document element. It is not important that you completely highlight the first and last items you want to delete; you only must highlight a part of them.
Go to the top of the page and click the Cut button
You will see the items disappear.
Click the Delete button to remove the items permanently from the document
The Cut And Paste window automatically reloads so you can cut and paste again.
To cut and paste a section of the document:
Place your cursor on the first item you want to cut (not on the number preceeding it) and hold the left mouse button down. Drag the cursor down over the document and lift the button over the final item you want to cut. The beginning and ending items must be "at the same level" of the document, in other words, they must be top level items of the document or they must be children of the same document element. It is not important that you completely highlight the first and last items you want to cut; you only must highlight a part of them.
Go to the top of the page and click the Cut button
You will see the items disappear.
Go down to the item you want to place the cut items before or after and click on it.
Click the Paste Before button to insert the cut items before the item you clicked. Click the Paste After button to insert the cut items after the item you clicked.
The Cut And Paste window automatically reloads so you can cut and paste again.
To copy a section of the document:
Place your cursor on the first item you want to copy (not on the number preceeding it) and hold the left mouse button down. Drag the cursor down over the document and lift the button over the final item you want to copy. The beginning and ending items must be "at the same level" of the document, in other words, they must be top level items of the document or they must be children of the same document element. It is not important that you completely highlight the first and last items you want to copy; you only must highlight a part of them.
Go to the top of the page and click the Copy button
It is very bad to have two different objects that have the same name that are created in a web page. (The only exception to this is if they are created using a condition if, else-if, then statement. In this case only one of several possible objects with the same name is created). Therefore, if you copy an item, you should adjust the name in some manner. Using the boxes at the top, you have the several options. Suppose you are copying a function named Mygoodfunction.
You can add a prefix to the name of the object you are copying. For example, if you type NEW in the Add Prefix To Names box, then the copied function will have the name NEWMygoodfunction.
You can add a suffix to the name of the object you are copying. For example, if you type NEW in the Add Suffix To Names box, then the copied function will have the name MygoodfunctionNEW.
You can replace letters in the name of Mygoodfunction in one of two ways: either you can replace all occurrences of a pattern of letters by some other pattern of letters, or you can replace the first occurrence of a pattern of letters by some other pattern of letters. For example, if you type o in the box Replace This In Names and YYY in the With This box and choose first occurrence in the Replace menu, the result is MygYYYodfunction. If you type the same information, but choose all occurrences, then the result is MygYYYYYYdfunctiYYYn. If you type oo instead o in the Replace This In Names box, the result is MygYYYdfunction.
You can add a prefix and a suffix and replace combinations of letters in an objects's name all at the same time.
If you copy several items, adding prefixes, suffixes, or replacing letters is done to all of the items copied.
Go down to the item you want to place the copied items before or after and click on it.
Click the Paste Before button to insert the cut items before the item you clicked. Click the Paste After button to insert the cut items after the item you clicked.
Be sure that you paste objects in a place that makes sense. For example, do not paste the graph of a function to a place that is before where the axes are created!
The Cut And Paste window automatically reloads so you can cut and paste again.
What is the Clipboard?
The Clipboard is a place where you can store items without them appearing in the document. Anything placed inside the Clipboard (which is the area at the bottom of the Cut and Paste window) is not part of your document, however items can be moved freely between the Clipboard and the document. If you Cut an item that you may or may not need in the future, you can place it in the Clipboard. This will allow you to move it back into your document in the future if you find out that you need it. There is no way to edit objects in the Clipboard unless you move them so they are again part of your document. When you Save a page, the Clipboard gets saved with it. However it is a good idea to not include junk in the Clipboard, since this makes the size of the web page (in kilobytes) larger, meaning that it may take longer to load.
The other buttons at the top of the Cut And Paste window:
If you cut a set of items, clicking the Undo Cut button returns the item to the page so you can begin again.
If you do not like the way some items were pasted, you can click the Undo Paste button. This will return your page to the condition it was before you pasted your last items. Note: you can even return to the page you are creating and add more items and make more changes. If you then return to the Cut And Paste window and click the Undo Paste button, it will return your page to the state it was before the last paste. All of your subsequent changes will be lost. (Of course, you can also return to previous versions using the Previous Version button at the top of the CALUMATH Page Maker page).
The Close button closes the Cut And Paste window
Lists
This button opens a new window that contains all of the objects you have created, listed by category. You can click on an entry to edit it.
Help
This button opens a small help window. The help window has almost no information in it, however you can access information about available colors through it.
Below is a description of all the Main Menu items and the Sub Menu objects that accompany each item.
Main Menu
Sub Menu
Description
Text And Html
Used for creating text, links to other web pages, images, and setting defaults, such as text size and color, for titles, paragraphs, lists, etc.
Text
Create Titles, Section Heads, Paragraphs, and Text.
Line Break
Use this to begin a new line in your web page.
Image
Use this to place an Image in your document.
Link
Use this to put a link to a web page in your document.
Iframe
This allows a completely different web page to be inserted into a box in your page.
Iframe Container
When constructing a set of axes that are to be hidden when the page is loaded, the axes must be placed in an Iframe Container.
Alert
This is a pop up window that can be used for such purposes as giving instructions after a button is clicked. It can also be used for warnings.
Name Web Page
You can choose the name the appears at the of the menu bar of your web browser when your web page is displayed.
Set Defaults
This is used to determine the font-size, color, alignment, font family, etc. for all the titles, paragraphs, lists etc. that appear in the page. These values can be adjusted for individual titles, paragraphs, lists, etc. that you create.
Functions and Constants
Used for Functions, Split Functions, Constants, Random Numbers, Arrays and Strings.
Define A Function
Used to define Functions such as f(x) = x^2, g(x)=10sin(x) and h(x) = xln(x)
Define A Split Function
Used to define Split Functions. These are functions which assign different values depending on the size of the input. An example is f(x) equals x^2 when x>0, but it equals x^3 if x<=0.
Define A Constant
Use this to define Constants, such as A=4, or B is a Nonzero Random integer between -2 and 10, or C is a Random Number between -3 and 3 rounded to 5 decimal places.
Named Object
Use this to define Arrays and Strings. An array is a list of elements, for example [0,1,2,3,4]. Note that arrays are enclosed in square brackets. Strings are lists of characters and with no meaning assigned to the characters. To define a Sting, you enclose it in either single or double quotes. For example, if you define a Constant by A=pi, then A will have the value A=3.1426... If you define the Named Object by A="pi", then A will be the two letters p and i together. No meaning will be assigned them.
Axes And Graphs
Used for Axes, Graphs of Functions, Circles, Lines, Arrows, and Brackets. You can also Plot Points on a set of Axes, or Highlight points on Lines or Circles or Graphs of Functions. You can also place Text on a set of Axes.
Draw Axes
Create a set of Axes. This is required before any of the graphs listed below can be done. There are many options for axes. You can make the horizontal and vertical axes visible or invisible, you can determine the spacing of the ticks along the axes, their color and the labels that are used for each tick. Constrained Axes will be scaled the same amount in the horizontal and vertical directions. You can provide a label for the horizontal axis, such as time, and a label for the vertical axis, such as distance.
Graph Of A Function
Use this to graph a Function. Note that the function must first be defined, using the Functions And Constants menu, before it can be graphed.
Circles And Arcs
Use this to draw Circles and Arcs.
Line Segment Graph
Use this to draw Line Segments or Polygons such as Triangles. The sides of the Segments and the Vertices can be labeled when the Polygon is created.
Plot A Point
Use this to plot a Point on a set of axes. You can control the size of the dot and whether it is an open or closed dot.
Move A Point
Use this to move an already created Point to a new position. You can also change the size or color of the Point at the same time.
Make A Rectangle
Use this to plot a Rectangle on a set of axes. The rectangles you create with Make A Rectange have vertical sides and a horizontal top and bottom. Once created, rectangles can be moved, and using the Dragging Objects menus, can be dragged around a set of axes and can even be stretched by having the user click and drag their sides. You can also create a rectangle by using the Line Segment Graph. Rectangles created by using Line Segment Graph do not have to have vertical sides, however, they cannot be moved or dragged once they are created.
Move A Rectangle
Use this to move an already created Rectangle to a new position. You can also change the size or color of the Rectangle at the same time.
Highlight A Point
Use this to highlight a point on a Graph, Circle or Line that is already plotted. If you graph f(x)=x^2 then highlighting the point on the graph where x=3 will plot the point (3,9).
Tangent Graph
Use this to draw a Tangent line to the graph of a Function or Circle or Arc. Tangent lines are used in calculus and are straight lines that most closely match a graph near a given point.
Text Plot
You can choose the name the appears at the of the menu bar of your web browser when your web page is displayed.
Label Vertex
You can label an individual angle at the vertex of a polygon. An small arc can be drawn to indicate that it is an angle.
Label All Vertices
You can label all the angles at the vertices of a polygon. An small arc can be drawn to indicate that you are labeling angles. All of the vertices have the same options, for example, color.
Label An Axis Coordinate
You can draw a tick as a specific horizontal or vertical coordinate on a set of Axes and choose the label, either a number or symbol, that should be displayed there.
Arrow Graph
You can draw an arrow on a graph. You control where the tip of the arrow lies and the horizontal and vertical length, in pixels, of the stem.
Bracket Graph
You can draw a bracket on a graph, for example, to indicate the change in vertical coordinates between two points. You can add text to the bracket and control where the text appears.
Point Brackets I, II, III
Use this when you want indicate the change in horizontal and vertical coordinates between two points. This would ideally be indicated by drawing a bracket in the horizontal direction, indicating horizontal change, and a bracket in the vertical direction, indicating vertical change. However, many times you will not know the points in advance, for example, because the two points are obtained by the user clicking on a graph. These three types of brackets, used together, provide reaonable brackets or arrows no matter what points are clicked. For example, if the points are close together, an arrow pointing to the points is drawn. If the points have the same horizontal coordinate but differ enough vertically, then a vertical bracket is drawn. If the points differ enough in both the horizontal and vertical coordinates, then horizontal and vertical brackets are drawn.
Updatable Graphs
For the most part, the graphs created using the Axes and Graphs menu are static. They can be created or removed through user interaction with the graph, however they cannot be modified once they are created. However, you may want to create an animation where a graph moves, or you may want to allow a user to drag a graph around on a set of axes. Updatable graphs fill this role. Once they are created, they can be updated to be the graph of a new function. You should only use updatable graphs if you know the graph will be moved, since they require more computer resources than the static graphs created in the Axes and Graphs menu.
Make Updatable Graph
This creates a graph that can be moved (or updated) to the graph of different functions. When you create an Updatable Graph for a set of axes, the Updatable Graph does not immediately appear. It only appears when you update it to a function graph (using the Update To Function Graph Sub-Menu) or to a tangent graph (using the Update To Tangent Graph Sub-Menu).
Update To Function Graph
Once you create an Updatable Graph and define a function, you use Update To Function Graph to tell the Updatable Graph to be the graph of the function. A typical use is the following. Define the constant A=1, and define the function f(x) = A*x^2. Create an Updatable Graph. Update the graph to the graph of f. Then define A=2. Then update the graph to the graph of f. Now the updatable graph is the graph of f(x) = 2x^2, whereas before it was the graph of f(x) = x^2.
Update To Area Between Functions
If you create an Updatable Graph and define two function, you can use Update To Area Between Functions to have the Updatable Graph fill in the area between the graphs of the two functions. Note that the two functions themselves do not need to be graphed; the Updatable Graph shades in the area between the two functions.
Update To Tangent Graph
If you graph a function in a set of axes, you can use an already created Updatable Graph to update to a tangent line to the graph of the function. One possible use is if you want to draw tangent lines at different points. You can do this with one Updatable Graph and updating it (using Update To Tangent Graph) to tangent lines at different points on the graph of the function.
Update With Blank Segments
Since Updatable Functions often need to be updated quickly, since they may be used when a graph is dragged around a set of axes, Updatable Graphs often do not display undefined parts of a graph correctly. For example, an Updatable Graph that is updated to the function f(x) = tan(x), will connect the very positive points to the left of π/2 and the very negative points to the right of π/2. Using Update With Blank Segments, you can force parts of updated graphs to be blank. This is also useful for the graphs of splitfunctions, where there are jumps between sections of the graph.
Animations
Used to construct Animations, the Buttons that control them, and Boxes that changing information, for example position, as the Animation runs.
Animation Plot
Create an Animation on a set of Axes and decide the image that the animation will move. Note that the Axes must be defined first, using the Axes and Graphs menu before you can construct an Animation.
Start Button
Creates the Start Button for an Animation. This causes the Animation to either begin, or to continue from the last position at which it was stopped.
Stop Button
Creates the Stop Button for an Animation.
Reset Button
Creates the Reset Button for an Animation. Clicking this Button initializes the Animation. For example, if a user plays the animation, clicking the Reset Button causes the Animation to be set up again at the beginning. When the user then clicks the Start Button, the animation plays from the beginning.
Step Button
Clicking this button causes the Animation to move one frame at a time.
Increase Speed Button
Clicking this causes the Animation to be played more quickly.
Decrease Speed Button
Clicking this causes the Animation to be played more slowly.
Change Direction Button
Clicking this causes the Animation to change direction.
Create All Animation Buttons
This allows all of the above Animation Buttons to be created at one time. It saves the page designer the time of having to create each button individually.
Animation Output
Suppose you have an animation of a falling body. As the object is falling, you can use an Animation Output to display information such as the time, or speed of the object or its height.
Composite Animation
Suppose you have individual Animations on different sets of Axes. A Composite Animation links all of these to one set of controls, therefore when the user clicks on the Start Button, the Animations in all of the Axes begin playing. You only need this if you are constructing animations in different axes that you want to be controlled together. If you want several animations to be played on the same set of Axes, then use Animation Plot.
Preprogrammed Buttons And Boxes
Used to construct Buttons that plots points where the user clicks or highlights points, draws tangents, or removes graphs at points on a graph where the user clicks.
Tangent Button
When the user clicks on the Tangent Button, the user is instructed to click on a graph. At the point where the user clicks, a tangent line is drawn.
Highlight Button
When the user clicks on the Highlight Button, the user is instructed to click on a graph. At the point where the user clicks, a the point is highlighted.
Point Button
When the user clicks on the Point Button, the user is instructed to click on a set of Axes. At the point where the user clicks, a point is plotted.
Remove Graph Button
When the user clicks on the Remove Graph Button, the user is instructed to click on a graph. The graph the user clicks on is removed.
End Remove Graph Button
When the user clicks on the Remove Graph Button, it stops the action of the Remove Graph Button. Therefore if the user clicks on a set of Axes, graph are no longer removed.
Calculator Button
When the user clicks on the Calculator Button, the user is instructed to enter a mathematical expression in the Input Box. When the user then clicks on the Enter Button, the expression is evaluated and the result apperars in the Results Box. This is a full functioning calculator. For example, expression such as 3*sin(pi/4)+e^3 will be numerically evaluated.
JavaScript Button
When the user clicks on the JavaScript Button, the user is instructed to enter a JavaScript expression in the Input Box. When the user then clicks on the Enter Button, the expression is evaluated and the result apperars in the Results Box.
Enter Button
What occurs when the user clicks on the Enter Button depends on what occurred before. If the user previously clicked the Calculator Button, then clicking the Enter Button evaluates the expression entered in the Input Box as a calculator would. If the user previously clicked the JavaScript Button, then clicking the Enter Button evaluates the JavaScript commands entered in the Input Box.
Input Box
A Text Box that the user inputs data into. When used in conjunction with the Calculator Button, the data entered in the Input Box is evaluated as if it were entered in a calculator and the result is placed in the Results Box. When used in conjunction with the JavaScript Button, the commands entered in the Input Box are executed.
Results Box
A Text Box that displays results of user interaction. As an option, the coordinates of points that the user clicks can be placed here. When used in conjunction with the Calculator Button, the data entered in the Input Box is evaluated as if it were entered in a calculator and the result is placed in the Results Box. When used in conjunction with the JavaScript Button, the commands entered in the Input Box are executed and any value returned is place in the Results Box.
Graph Menu
A drop down menu that contains a list of all of the graphs drawn on a set of Axes. When the user clicks a Tangent Button or Highlight Button, the graph that is chosen in the Graph Menu is the one that the user can click on to draw tangent lines or highlight points.
Buttons and Boxes
Used to construct Buttons and Boxes and determine exactly what takes place when the Button is clicked.
Button
Construct a Button. After constructing the Button, you need to construct a Button Action. The items added to the Button Action will be made or executed when the Button is clicked.
Click On Graph Button
A Click On Graph Button is a special type of Button. Its purpose is to prepare a set of Axes to receive user clicks. When constructing the Click On Graph Button, you determine how many times to allow the user to click on the Axes. Typically when the user clicks on a Click On Graph Button, the page designer will display an instruction message informing the user that they are to click on a set of Axes. After constructing the Click On Graph Button, you need to construct two Button Actions. The items added to one Button Action will be made or executed when the Button is clicked. The items added to the other Button Action will be made or executed when the user clicks on the Axes.
Button Action
This creates a Button Action. There are two types of Button Actions. For both Buttons and Click On Graph Buttons there is a Button Action that takes place when the Button is clicked. The name for this Button Action is the name of the Button followed by _ButtonAction. For Click On Graph Buttons, there is an additional Button Action that takes place when the user clicks on the Axes. The name for this Button Action is the name of the Button followed by _ClickAction. You can think of a Button Action as a container. Items added to the Button Action are executed when the Button is clicked or the graph is clicked by the user.
Add To Button Action
When you create a Button Action, you add items to it. These items are executed when the user clicks on the Button, or in the case of Click Buttons, when the user clicks on a set of Axes. Many times, after you finish the Button Action, you may realize that you want to add other items to the Button Action. This can be accomplished using the Add To Button Action.
Name Clicked Point
This is only used as part of a Button Action for a Click Button. When the user clicks on a set of Axes, the point is given the name you choose using Name Clicked Point. For example if the user clicks on the point [3,4] and you name the point MyPoint, then MyPoint equals the Array [3,4]. Remember that Arrays are lists. Therefore MyPoint[0]=3 and MyPoint[1]=4. As a convenience, automatically the values MyPoint.x=3 (the x coordinate) and MyPoint.y=4 (the y coordinate).
Button Action Next
This applies only to Click Buttons. When you create a Click Button, you determine how many times you want the user to click on the Axes. You have the choice of having all of the items in the Button Action executed each time the user clicks on the Axes, or having some of the items executed at certain times. This latter scenario is done by use of the Button Action Next. The items in the Button Action are executed until the Button Action Next is reached. The next time the user clicks on the Axes, the items after the Button Action Next are executed until a new Button Action Next is reached. For example, suppose a Button Action contains the following items: Tangent Graph, Button Action Next, Highlight A Point, Button Action Next, Tangent Graph. When the user clicks on the graph a tangent is drawn. The second time the user clicks, a point on the graph is highlighted. The third time the user clicks on the graph, a tangent is drawn.
Text Box
Creates a Text Box that allows the user to input values. These values can be accessed by means of the Accessing Values Menu. You can also place values in the Text Box by means of the Accessing Values Menu.
Text Area
Creates a Text Area that allows the user to input values. The diffence between a Text Box and a Text Area is that Text Areas can be an arbitrary number of rows long. These values placed in a Text Area can be accessed by means of Accessing Values Menu. You can also place values in the Text Area by means of the Accessing Values Menu.
Check Boxes And Radio Buttons
Used to create Check Boxes and Radio Buttons. These indices checked can be accessed by means of the Accessing Values Menu. You can also check or uncheck boxes by means of the Accessing Values Menu.
Drop Down Menu
Used to create a Drop Down Menu. These selected entry can be accessed by means of the Accessing Values Menu. You can also select an entry by means of the Accessing Values Menu.
Change Button Type
This is used if you created a Button, but later realize that it should be a Click Button or vice-versa.
End Button Action, Conditional, Etc.
This is used if, during a Button Action, you clicked OK in a pop up window that said Continue Button Action, but realize that you don't want to add more items to the Button Action.
Dragging Objects
Used to drag previously created Points and Rectangles around on a set of axes or create and move a sliding scale. Also used to stretch the sides of a rectangle by having the user drag their sides. Also used to capture the path that a user drags their cursor over; this can be used to draw a graph corresponding to the points over which the user dragged their cursor. In general, when you alow the user to drag an object you create two routines, one that is executed while the user drags their cursor, and one that is executed after the user drags their cursor. You associate the Routines to the Capture Drag Path by means of the Routine For Dragging sub-menu.
Activate Capture Drag Path
This activates a set of axes to be prepared for the user to drag their cursor over the axes. When the user does, CaluMath keeps track of the points the cursor is dragged over. You access this array of points by using the Name Dragged Value sub-menu. Once you have the array of points, you can create a function whose graph goes through those values by using the Define A Split Function sub-menu.
Deactivate Capture Drag Path
This stops CaluMath from keeping track when a user drags their cursor over a set of axes. Typically, after the user is done dragging their cursor over a set of axes, a routine (designed by you) is executed (perhaps which creates a graph based on where the user dragged the cursor). After that, you do not want the user to keep dragging their cursor over the graph. One way to accomplish this is to have the user click a button when they are done dragging. The Button Action for the button deactivates the Capture Drag Path.
Activate Dragging Points
This activates the ability of the user to drag previously constructed Points around on a set of axes. When the user does, CaluMath constantly reports the coordinates of the point as it is dragged. You access these coordinates by using the Name Dragged Value sub-menu. Once you have the coordinates, you can create a Routine that uses the coordinates to, for example, update a graph to a new position. You associate the Routine to the points you are dragging by means of the Routine For Dragging sub-menu.
Dectivate Dragging Points
This stops the user from dragging points that they previously were able to drag.
Activate Dragging Rectangles
This activates the ability of the user to drag previously constructed Rectangles around on a set of axes. When the user does, CaluMath constantly reports the coordinates of the Rectangle as it is dragged. You access these coordinates by using the Name Dragged Value sub-menu. Once you have the coordinates, you can create a Routine that uses the coordinates to, for example, update a graph to a new position. You associate the Routine to the points you are dragging by means of the Routine For Dragging sub-menu.
Dectivate Dragging Rectangles
This stops the user from dragging Rectangles that they previously were able to drag.
Activate Stretch Rectangles
This activates the ability of the user to stretch previously constructed Rectangles by dragging their sides. When the user does, CaluMath constantly reports the coordinates of the Rectangle as it is stretched. You access these coordinates by using the Name Dragged Value sub-menu. Once you have the coordinates, you can create a Routine that uses the coordinates to, for example, perform a calculation based on the position of the dragged side of the Rectangle. You associate the Routine to the points you are dragging by means of the Routine For Dragging sub-menu.
Dectivate Stretch Rectangles
This stops the user from dragging the sides of Rectangles that they previously were able to drag.
Activate Construct Rectangle By Dragging
This allows the user to click their mouse down on a point on a set of axes and then drag their mouse over the graph. As they do, a rectangle with corners at the original point and the current point is created. As they drag their cursor, the dimensions of the rectangle change. Unlike other dragging constructions, you cannot associate a Routine to a Activate Construct Rectangle By Dragging that will do something while the rectangle is being created. Once the Rectangle has been constructed however, you can access its coordinates and use them in any manner you wish.
Deactivate Construct Rectangle By Dragging
This stops the user from creating a rectangle by dragging.
Construct Sliding Scale
Used to create a Sliding Scale. The user can move a "lever" on the sliding scale. As the user moves the lever, CaluMath reports the position of the lever so a Routine can cause something to happen based on where the lever moves.
Activate Sliding Scale
This allows the user to drag the lever on a Sliding Scale. As they drag the lever, CaluMath constantly reports the poition of the lever. You access the position of the lever by using the Name Dragged Value sub-menu. Once you have the position, you can create a Routine that uses the coordinates to, for example, update a graph based on the position of the lever. You associate the Routine to the lever by means of the Routine For Dragging sub-menu.
Dectivate Sliding Scale
This stops the user from being able to move the lever on a Sliding Scale.
Name Dragged Value
This captures the information about dragging for the above mentioned dragging techniques. Once the value is named, it can be used in a Routine to do something based on the position of the dragged object.
Routine For Dragging
When you allow the user to drag an object, you also (separately) create a Routine which contains all of the steps you want executed either while the object is being dragged or after the object is done being dragged. Usually, one of the first steps in the routine is use Name Dragged Value to capture the coordinates of the dragged object. Then the Routine would normally update a graph based upon the coordinates or do some calculation involving the coordinates. You use Routine For Dragging to associate the Routine to the things being dragged, in other words, while the object is being dragged the Routine For Dragging tells CaluMath to execute the Routine that is associated to the dragged objects.
New Windows
Used to create New Windows and place items in the New Window.
New Window
Used to create a New Window. You can think of the New Window as a continer. The items you add to the New Window will be placed in the New Window.
Add To New Window
After you construct a New Window you may find that you want to add more items to it. You can use the Add To New Window menus to add items to a New Window.
End Button Action, Conditional, Etc.
This is used if, during a New Window, you clicked OK in a pop up window that said Continue New Window, but realize that you don't want to add more items to the New Window.
Tables
Used to create and modify Tables.
Table From List
Used to construct a table from data entered as a list (actually a double array). The entered information consists of an array, where each entry is an array consisting of a row of the table. You cannot use this to create a table that contain non-text entries, for example you cannot have a set of axes be an entry in the table.
Function Table
Function Tables list a range of values of a variable, spaced at regular intervals, and the values functions assign to those variable values.
Table
Used to create a Table. The rows and columns of the table are numbered starting with 0. If you name the table MyTable and give it a size of 2 rows and 2 columns, then automatically the values MyTableR0C0,MyTableR0C1,MyTableR1C0, and MyTableR1C1 are created. These to the top left, top right, bottom left and bottom right entries respectively. The table created is blank; you enter data in the table by creating other objects and using fields such as Insert Option and Insert Target to place them in the table. The Table sub-menu is the only way to place a non-text item, such as a set of Axes or a Link, inside a table.
Insert Table Row
Used to insert a row in a table. This can only be used with tables constructed with the Table sub-menu.
Insert Table Column
Used to insert a columnn in a table. This can only be used with tables constructed with the Table sub-menu.
Delete Table Row
Used to delete a row in a table. This can only be used with tables constructed with the Table sub-menu.
Delete Table Column
Used to delete a column in a table. This can only be used with tables constructed with the Table sub-menu.
Lists
Used to create and modify Lists.
List
Used to create a List. The list items are numbered starting with 1. If you name the list MyList and give it a size of 2 items then automatically the values MyListI1,and MyListI2 are created. These refer to the first and second items in the list MyList respectively.
Insert List Item
Used to insert an item in a list.
Delete List Item
Used to delete an item in a list.
Accessing Values
Used to obtain which Check Boxes, Radio Buttons, or Drop Down entries were selected or checked. Also used to obtain what was entered by the user in a Text Box. This menu can also be used to place values in Text Boxes and select Check Boxes, Radio Buttons, and Drop Down menus.
Get Text Box Value
Used to give a name to to value in a Text Box or Text Area. Once it has a name, you can refer to it and use it in any way you wish.
Place Value in Text Box
Used to place a String of Text into a Text Box or Text Area.
Get Box Or Drop Down Index
Used to give a name to the index selected or checked in a Check Box, Radio Button, or Drop Down Menu. The entries in Check Boxes, Radio Buttons, and Drop Down Menus are numbered starting with 0. Therefore if a set of Radio Buttons has three entries, they are numbered 0,1,2. Using Get Box Or Drop Down Index allows you to give a name to the index that is selected by the user. This allows the page designer to know which item was selected.
Put Box Or Drop Down Index
Used to select or check an entry in a Check Box, Radio Button, or Drop Down Menu.
Search
Used to search all of the tangents, points highlighted, or points plotted. Can also be used to seach the elements of an Array. RIGHT NOW THERE ARE BUGS IN THIS!!!
Visibility
Used to make Text, Buttons, Click Buttons, Check Boxes, Radio Buttons, Drop Down Menus, Tables, Lists, Axes or Graphs visible or invisible.
Hide and Unhide
Used to make any object that is not a graph visible or invisible. This includes Text, Buttons, Click Buttons, Check Boxes, Radio Buttons, Tables, Lists and Drop Down Menus.
Remove HTML
Used to remove non-graph objects from the page. This does not merely make the object invisible, it actually removes the object. Note that this should only be used in Button Actions and Routines or in response to user interaction with the web page. If you create an object that you realize you do not want, remove it by editing it and choosing the Delete Button in the editing screen.
Hide and Unhide Graphs
Used to make any graph or axes visible or invisible.
Remove Graph
Used to remove graphs or Axes from the page. This does not merely make the graph invisible, it actually removes the graph. It automatically removes any children of the graph or Bottons or Boxes associated with the graph. Note that this should only be used in Button Actions and Routines or in response to user interaction with the web page. If you create a graph that you realize you do not want, remove it by editing it and choosing the Delete Button in the editing screen.
Focus Object
A Focus Object is created in a place in the page that you want to be visible to the user. For example, suppose that when a user clicks on a Button, some Text is added to the bottom of the page. The Text may not be visible to the user unless the user scrolls down the page. Therefore, you should construct a Focus Object immediately before or after (or inside) the Text. Using the Place Focus Menu puts the focus on the Focus Object so that the text is visible to user.
Place Focus
Used to place the focus on a Focus Object or Box or Button. This means that the window will scroll until the Box, Button, or Focus Object is in view.
Conditionals and Routines
Used to create Conditionals (if-then statements), For Loops, Comparisons, Routines, or add JavaScript code to a page.
Conditional
Used to create if-else if-then statements. For the if or else if part a screen a Comparison screen is opened. You fill in the statement that must be fulfilled in order for the remainder of the conditional to be executed. The remainder of the Conditional is a container that contains the statements to be executed if the Comparison statement is satisfied. The else statment has no Comparison screen and is just a container that contains the statments executed if none of the if or else if statments are executed.
Add To Conditional
Used if you have already created a Conditional and later realize that you need to add something to it.
Comparison
Used to provide a name for a Comparison statement. If the Comparison statment is satisfied, the name takes the value yes, if not, it takes the value no. For example, if A is a random integer, you can create the Comparison A<0 and give it the name MyComparison. If A is negative, MyComparison will equal yes otherwise, MyComparison equals no.
Routine
A Routine is a container with items that you place in it. When the Routine is executed all of the items in the Routine container are executed.
Add To Routine
Used if you have already created a Routine and later realize that you need to add something to it.
Execute Routine
Used to Execute a Routine. This causes all of the items in the Routine to be created or executed.
For Loop
This creates a For Loop, as is found in most programming languages. For example: for(i=0; i<10; i++){ Do these items}. After the intial For Loop screen, which creates the For Loop, the For Loop is a type of container. All the items added to the container will be executed each time the loop is exectuted.
Add To For Loop
Used if you have already created a For Loop and later realize that you need to add something to it.
JavaScript Command
Used to add a JavaScript Command to your web page.
End Button Action, Conditional, Etc.
This is used if, during a Conditional, Routine, or For Loop, you clicked OK in a pop up window that said Continue Conditional, For Loop, or Routine, but realize that you don't want to add more items to it.
Advanced Editing
Allows you to Import part of a previously constructed page into the present page. It also allow you to add comments to your page. The comments are visible in Edit Mode.
Import Page
Allows you to Import part of a previously constructed page into the present page.
Change All Links
If you had several links to a certain file and the file name has been changed, you can change all of the links simultaneously with Change All Links.
Change All Images
If you had graphics from a certain graphics file in your document and the file name has been changed, you can change all of the graphics in your document simultaneously with Change All Images.
Add Html
You can add Html directly to your document with this command. This allows you to create Html with other web authoring tools and place it directly in a CALUMATH web page.
Add Head Html
You can add Html directly to the head of your document with this command. This allows you to add meta tag information and link directly to an external CSS stylesheet.
Comment
Adds Comments to the page that are visible in Edit Mode.
In this section we give a guide to constructing effective pages with the CALUMATH Page Maker page.
Names
CAS Page Math uses naming standards that are consistent with an Object Oriented Programming language, however you don't have to know anything about Object Oriented Programming. You just need to recognize how CALUMATH adjusts the names you give the objects that you create. Here is an example.
Suppose you construct a set of Axes and name it H. The name for every graph in H that you construct has H. preceeding it. Therefore if you define a function f, then the graph of f has the name H.f, not just f. If you draw a tangent line L on the graph of H.f, then H.L is the name of the tangent line. If you want to remove a graph from a page, the graphs will be listed by their names. So you need to realize that although you might be thinking of the graph of f, it will be listed as H.f when you want to remove it.
In a similar manner, if you associate a button called MyButton to the graph H, then H.MyButton is the real name for the button. Buttons need to be associated with something, if they are not associated to a graph then by default they are associated to something called the CM_ParentObject. So you might name your button MyButton, but in a list of buttons it will appear as CM_ParentObject.MyButton instead of MyButton.
What do Button Actions, Routines, New Windows, Conditionals, and For Loops Have in Common?
We will use a Button Action as an example. It acts as a type of container. You put the items you create inside this Button Action container and when the user clicks the Button associated to the Button Action, then all of the objects in the container are created. Similarly, for a New Window, everything in the New Window container is created when the New Window is created. A Conditional is similar except for this fact: if the conditional is an if or else-if statement, you are taken to a Comparison screen first before you add items to the container. If, in the web page, the Comparison is true, then all the items in the container are constructed.
About Buttons
Assume you create a Button and name it MyButton. When you click on the Button, nothing happens unless you create a Button Action. If you create a Button Action, the items in the Button Action are created when MyButton is clicked.
Many times you want a user to click on a Button, then something happens, then you want the user to click on a new Button, and then something else happens. Typically this means you will need to create two buttons, say MyButton1 and MyButton2. However, you only want the buttons visible one at a time. To do this, when MyButton2 is created, you go to the Visibility menu and select invisibile. Therefore, when the user sees the page, only the first Button is visible. In the Button Action for MyButton1 you should put the items you want created or done. Make sure you add two extra things. The first is that you want MyButton1 to be made invisible. This way, when the user clicks MyButton1, it does what it is supposed to do and then disappears so the user cannot click on it again. The second thing you should add to the Button Action for MyButton1 is to make MyButton2 visible.
About Focus Objects
Many times you will add Text to a page when a user clicks a Button. However, if the text is added to the bottom of the page, or some place not near where the button that is clicked is located, then the user may not notice that Text has been added, since the user may not know that he or she is supposed to scroll to see it. The way to deal with this is by a Focus Object. To use it, after the Text is created in the Button Action, you should add a Focus Object to the Button Action and make sure it appears in the page right after the Text appears. Then add a Place Focus object to the Button Action and choose to place the focus on the Focus Object you just created. Then when the Button is click, the Text is created, the Focus Object is created and then the focus is placed on the Focus Object. This means that the screen will automatically be scrolled until the Focus Object, and hence, the Text, comes into view.
To make your life simple, open the CALUMATH Page Maker with the Firefox Web Browser. Throughout this tutorial, we will assume you are using Firefox.
You must download the CALUMATH Web Site to your computer. Follow the directions given here: Download. Pay particular attention to the fact that you cannot place the CALUMATH folder in any folder that contains the word CaluMath (actually the folder cannot have any folder with the word CaluMath in its path name). The CALUMATH folder contains the entire CALUMATH web site. After you download the folder, open it. The file you are currently reading has the name CaluMath_HomePage.html. The CALUMATH folder also contains several other folders. Open the folder pagemaker. Inside it is a file called pagemaker.html. This file is the CALUMATH Page Maker. To use the CALUMATH Page Maker, open this file with the Firefox Web browser.
The other folders inside the CALUMATH folder that you should be interested in are the following:
MyWebPages. This is the folder where you should save all of the CALUMATH pages you create.
examples. This is a folder that contains simple examples of CALUMATH pages and an explanation of the settings used to create them. These pages were constructed so that you could open them in the CALUMATH Page Maker. After doing so, look at the pages and then click Edit. This will allow you to see the structure of the page and return to the menus where the objects were actually created.
college_algebra. This is a folder that contains web pages created for a College Algebra course at Purdue Calumet.
The basic functioning of the CALUMATH Page Maker is very simple. The CALUMATH Page Maker is used to create interactive web pages involving mathematics. It contains menus, buttons and boxes to allow you to create many types of objects. After creating several objects, you click View Page at the top of the CALUMATH Page Maker and the page you are creating will open. If you want to add more items, return to the CALUMATH Page Maker and add more items. Click View Page again to judge your progress. If you want to change something you created, click Edit Page at the top of the page. A window will open that contains the structure of the page you created. It also lists every object you created. Click on any object you created and you will be returned to the menu where you originally created the object. You can then adjust any settings you selected; you can even delete the object if you want. If you want to move objects around on the page, click Cut and Paste at the top of the page. This will allow you to either copy items, or cut and paste them to different parts of the page. It also reveals a part of the page called the ClipBoard. The ClipBoard only appears when you click Cut and Paste. If you cut or copy items to the ClipBoard, they do not appear in the page but are saved in case they are needed in the future. You can copy items back from the ClipBoard to the actual document you are creating if you find that you need to. When you are satisfied with your page, you save it. Instructions about saving a page are given here: Saving PagesDo not save your CALUMATH pages by using the save icon or clicking File and Save on your browser toolbar as you would for most pages. This will wreak havoc with your work.
You can only cut and paste objects using Cut and Paste; you cannot edit items using it. You can only edit items using Edit; you cannot cut and paste items using it.
There are two other ways you can edit items.
If you click Lists at the top of the page, a window opens containing a list (by category) of all the items you have created. Click on any item to return to the menu where it was created so you can edit it.
If you click View, the page you are constructing opens. At the bottom of the page will be a button titled Click Here to Edit Text. Click the button and then click on any text that appears on the page. You will be taken to the menu where the text was created. You can only edit text by using this button, however it is very handy if you notice a misprint that you want to immediately correct. The button only appears when you are constructing a page with the CALUMATH page maker. It does not appear when the page is saved and opened by itself.
When you are constructing any object (except for text) you will be taken to two tables with entries for you to fill or or select. The bottom table will contain required fields and must always be filled out. The top table contains optional fields, and can always be left either blank or with their default values. As a beginner using the CALUMATH Page Maker, do not bother with optional fields. As you become more experienced, you can experiment with the optional fields to tailor your page to your exact needs.
You can load a previously created page by clicking Load Page at the top of the CALUMATH Page Maker. Upon doing this, a box opens where you can browse through the folders on your comuter. You can open CALUMATH pages contained in you MyWebPages folder, the examples folder, or the college_algebra folder.
First Exercise
For this exercise we will load a page contained in the example folder into the CALUMATH Page Maker. We will view the page and change it. To do this:
Open the CALUMATH Page Maker.
Click Load Page at the top of the CALUMATH Page Maker. Click the Browse button (some browsers call this button Choose or File). Click Desktop, click the CaluMath folder, click the example folder, and click the file Simple Example I.html. Then click Open. This closes the dialog box and returns you to the CALUMATH Page Maker. Click From My Computer at the top of the page, since the file is located on your computer. Once this is done, a warning pops up, telling you that you will lose all your previous work unless you saved it prior to loading a new page. Since we did not construct anything yet, click OK to the warning. The CALUMATH Page Maker opens the page Simple Example I.html for you to see, and internally determines the structure of the page.
Look at the page for a bit. There is a discussion of the settings used, however you can read this page later if you like.
Click the Click Here to Edit Text button at the bottom of the Simple Example I.html page. Then click on the title of the page
This takes you to the menu where the title was created. You can see what settings were used, for example, the font size of the title is 36px and the title name is Title0. The words in the title appear in the large Text box. Click in the box and add your name to the title, for example, type "by Patti Smith." Change the color of the title to blue. Click the Finish Text button at the bottom of the page.
Click View Page at the top of the CALUMATH Page Maker. Your revised page will open showing you the changes you made.
Keep the View window open and return to the CALUMATH Page Maker. Click Edit Page and an edit window opens that displays the structure of the page. Click the Define A Function entry.
This returns you to the CALUMATH Page Maker with the menu where the function was created. Change the definition of the function, for example, by entering 3*x^2 -12 in Function Definition. Click the Finish Define A Function button.
Click View Page to see your page. Notice that the equation of the graph appears to the right of the graph and is in the same color as the color of the graph.
We'll edit the page some more. Click Edit. In the edit window that opens, click Graph Of A Function. This returns you to the CALUMATH Page Maker and the menu where the graph of the function was created. Enter -3 for Beginning X Value and 4 for Ending X Value. Select Thick for Plot Style. Click the Finish Graph Of A Function button.
Click View Page to examine your page. Notice that the axes still go from -6 to 6, even though the graph of f only goes from -3 to 4. We can adjust the axes so the axes and the graph coordinate. Click Edit Page to open the edit window. Click the Draw Axes entry. This returns you to the menus where the axes H were created. Enter -3 and 4 in Beginning X Value and Ending X Value, respectively. Notice that the Beginning Y Value and Ending Y Value are set to default. This means the axes will adapt themselves to fit whatever functions are drawn on them.
Scroll up the page to view the many options you can choose from. You are safe to ignore this section, however we will explore it for a bit.
Near the top of the options section, select no for Display Equation. This will stop the equations of the graphs we draw from appearing to the right of the graph.
A little further down, enter Time for Label For X Axis and Velocity in Label For Y Axis.
Further down select yes in Grid Lines.
Click finish Draw Axes. Click View Page to view your page. Notice that the axes are labeled Time and Velocity, the equation of f no longer appears to the right of the graph and there are grid lines on the axes.
Now we will construct something new. Return to the CALUMATH Page Maker (without closing the view window). Under the Main Menu, select Axes and Graphs and click Continue. The Sub-Menu appears. Select Highlight A Point and Click Continue.
In this menu, we can highlight points on graphs. Since we have only constructed the graph of the function f, this is the function on whose graph we can highlight points. In X Coordinate, enter 3. If you try to enter anything in MultiFunction Index (which only has to do with things such as Circles and Polygons where there may be several points on the graph with the same x value) it will disappear after you type. Select yes in Display Equation. Click the Finish Highlight A Point button.
Click View Page to see your page. Notice that the point with an x coordinate of 3 on the graph of f is highlighted. Notice that the equation of the highlighted point does not appear, since the setting for the axes over-rules the setting for the individual graphs or points.
Click Edit. Notice the structure of the page. Indented and beneath the Draw Axes: H is the Graph of a Function:f. This symbolises that the graph of f is a child of the axes H. Indented and beneath the Graph Of A Function:f entry is the Highlight A Point entry. This symbolises that the highlighted point is a child of the graph of f. This is important. If you were to delete the graph of f, the CALUMATH Page Maker automatically deletes its children-in this case the highlight. This makes sense, since the highlight would have no place to appear if the graph of f were deleted. Similarly, if you delete the axes H, you delete both the graph of f and its children (namely the highlight on the graph of f).
Click the Draw Axes entry. This returns us to the menu where the axes H were created. Select no for Grid Lines and select Yes for Display Equation. Click Finish Draw Axes.
Click View Page to view your page. Note that the equations of both the graph of f and the highlighted point appear.
Now let's add some user interactivity to the page. There are three types of buttons you can create with the CALUMATH Page Maker:
The first is just called a button. When you click on the button you can make something happen, for example, a new paragraph can appear, something can disappear, or you can add objects to a graph.
The second is called a Click On Graph Button. When you click on this, you can make anything happen, just as with a button above. However its real purpose is to allow a viewer to click on a graph and capture where the viewer clicks. Therefore Click On Graph Buttons have two actions associated with them, one when the user clicks on the button and another when the user clicks on the graph.
The third type of buttons are called standard buttons. They are preprogrammed to allow the user to click on a graph and do certain things, such as highlight points on a graph, plot points, or draw tangent lines.
First we'll add a button to our page. Do the following:
Select Buttons and Boxes from the Main Menu and click the Continue button. Select Button from the Sub-Menu and click the Continue button.
This takes you to the menu for creating buttons. We do not have any reason to associate this button with and Axes or Graph, so we can leave the default value none for these fields.
Enter MyButton in the Button Name and enter Click Me for the Button Label. The Button Label is the text that appears on the button.
The page we are constructing has only two paragraphs, Paragraph0 which lies above the set of axes and Paragraph1 which lies below the set of axes. We will make the button appear before Paragraph1. To do this select insert before in Insert Options and Paragraph1 in Insert Options. Then click the Finish Button button.
View Page your page. For many browsers, the button with the words Click Me will appear before Paragraph1, but it may appear to the right side of the page, to the right of the set of axes. To fix this we will put a line break between the axes and the button, so the button will at the very left of the page on its own line. To do this, select Text and Html from the Main Menu and click the Continue button. Select Line Break from the Sub-Menu and click the Continue button.
Line Breaks are so insignificant, you do not even need to give them names. However select insert before in Insert Options and select CM_ParentObject.MyButton from Insert Target. Note that the full name for the button is CM_ParentObject.MyButton not MyButton. You do not need to understand why this is so, but just recognise that sometimes things are given more complicated names than you might expect. If we had associated MyButton to the axes H, it would have been named H.MyButton. If we had associated MyButton to the graph f in the axes H, it would have had the full name H.f.MyButton. Click the Finish Line Break button.
A warning comes up that we did not give the Line Break a name. Most CALUMATH items require names, however a Line Break does not. The choice for any warning is to continue at your peril, or do what it recommends or continue at your peril. In this case we ignore the warning and click OK. There are other cases where warnings should be ignored, however they are difficult to describe at this moment.
View the page to see the correct placement of the button. Click the button. Nothing happens, since we did not tell the button to do anything.
To tell the button to do something, we create a button action. We will tell the button to hide the first paragraph of the page and to add a new paragraph at the bottom of the page. To do this select Buttons and Boxes from the Main Menu and click the Continue button. Select Button Action from the Sub-menu and click the Continue button. The only button we created, namely CM_ParentObject.MyButton appears as the only choice in the Button Field. We can only select When Button Clicked as the choice for Timing of Event. This means that the things we tell the Button Action to do will happen when the button is clicked. Click the Finish Button Action button. A window pops up saying Now do the item you want to add to your button action. Close this window.
Think of a Button Action as a container. Into the container you put all the items you want done when the button is clicked. Notice that the CALUMATH Page Maker says (in red) You are in a Button Action. This is to remind you that everything you do will be put in the Button Action container. The first item will be to hide Paragraph0. To do this, select Visibility from the Main Menu and Hide and Unhide from the Sub-Menu. Select Paragraph0 from the Object menu and invisible from the Visibility menu. Click the Finish Hide and Unhide button.
A window pops up asking if you want to continue your button action. Click OK to add more items to the Button Action container or click Cancel to stop adding items to the Button Action container. We want to add a paragraph to the end of the page, so click OK. A window pops up saying Add another item to your buttonaction. Close this window.
To add a new paragraph, select the Text and Html from the Main Menu and Text from the Sub-Menu. Click the Continue button. Select Paragraph from Text Type. Select x-large for Font Size and bold and italics in the Bold and Italics fields. Type You clicked on Click Me in the large Text Box. Click the Finish Text button. You are asked if you want to continue with the Button Action. Click Cancel to stop adding more items to your Button Action container. A pop up window says You have finished your buttonaction. Close this window.
Click View Page in the CALUMATH Page Maker to view your page. Click the Click Me button. You will see the first paragraph disappear. However, unless you scroll down the page, you will not notice that a new paragraph was added to the page. This is a common problem. How do you make sure the viewer sees new items that were added to a page. The answer is very easy. We will add a Focus Object to the page and place the focus of the page on the focus object.
We want to focus the viewers attention to the last paragraph when the button MyButton is clicked. Therefore we should add this to the Button Action for MyButton. But the Button Action has been created already. How do we add more items to it? Simple, using the Add To Button Action Sub-Menu.
Select Buttons and Boxes from the Main Menu and select Add To Button Action from the Sub-Menu. Click the Continue button. We have only created one Button Action so far and it is listed in the Button Action field. Click the Finish Add To Button Action button. A pop-up window says "Now do the item you want to add to your button action." Close this window.
Everything is now as if you were still in the middle of your button action. Anything you do gets added to the Button Action container. Select Visibility from the Main Menu and Focus Object from the Sub-Menu. Click the Continue button.
We could choose to put the focus object anywhere we want by using the Insert Options and Insert Target menus. However, our new paragraph is at the end of the page which is where the Focus Object will automatically be put, so we do not select anything in these fields. A name will be suggested, in this case it is Focus7, and we can just accept it. Click the Finish Focus Object button. You are asked if you want to coninue the Button Action. Click OK. Close the window that says "Add another item to your buttonaction."
To place the focus of the page on the Focus Object, select Visibility from the Main Menu and Place Focus from the Sub-Menu. Click the continue button.
Select CM_MainWindow.CM_ParentObject.Focus7 in the Focus Target. Note that the page we are creating is called by the CALUMATH Page Maker the CM_MainWindow. If we were to create buttons in the CM_MainWindow that open other windows, they would have different names. Click the Finish Place Focus button. Click Cancel when asked if you want to continue with the button action. Close the window that says "You have finished your buttonaction."
View your page. Click on the Click Me button and watch the window scroll until the You clicked on Click Me paragraph is visible. Note that if you scroll back up and click on Click Me again, a new paragraph is created. Click on it again and another paragraph appears. This would be very poor web page design. Typically you want the user to move onto a new task, and not senselessly do the same thing over and over. The typical way to do this with CALUMATH is to hide the button after it is clicked.
Now lets add a Click On Graph Button to the page. When the user clicks on the axes H we will plot a point where the user clicks. But first, it seems a little silly to have the You clicked on Click Me paragraph to appear at the end of the page, so far from where the button was clicked. Lets adjust this first and then add the Click On Graph Button.
To adjust the paragraph, click Edit Page in the CALUMATH Page Maker. You can see that the four items in the Button Action are below and indented below the Button Action line. This signifies that they are children of the Button Action. Click on the Paragraph line in the Button Action. You are returned to the menu where we created the paragraph. In the Insert Options menu select insert after and in the Insert Target menu select CM_ParentObject.MyButton. In the large text box, type Click the Continue button, instead of the silly You clicked on Click Me. Click the Finish Text button.
We need to place the Focus Object near the paragraph and not leave it at the bottom of the page. To do this, click Edit Page in the CALUMATH Page Maker and click the Focus Object line. In the menu that appears select insert after and Paragraph2 in the Insert Options and Insert Target fields. Click the Finish Focus Object button.
View your page. Click the Click Me button.
We now add the Click On Graph Button. Select Buttons and Boxes from the Main Menu and Click On Graph Button from the Sub-Menu. We will want the user to click on the axes H and plot a point where the user clicks (whether it lies on any graph appearing the axes H or not). Therefore select H in Axes and none for Graph. In Click Button Name type MyClickButton and in Button Label, type Continue. We will let the user click on the axes H 3 times and plot points. Enter 3 in Number of Clicks. Select all in Execution. This means that all of the items in the Button Action container will be created each time the user clicks on the graph. Click the Finish Click On Graph Button.
View the page. Note that the Continue button appears at the bottom of the page. We could rectify this by editing the button and using the Insert Options and Insert Target fields. However we will do this by cutting and pasting instead.
Click Cut And Paste at the top of the CALUMATH Page Maker. A window, much like the edit window opens. We will move Paragraph1 to the bottom of the page, after the Click On Graph Button:MyClickButton line. To do this, highlight ANY part of the Paragraph:Paragraph1 line, except for the number at the beginning of the line. You do not have to highlight the entire line.
At the top of the page, click the Cut button. The highlighted line disappears.
Click anywhere in the Click On Graph Button:MyClickButton line except for the number in front of the line. Then click on the Paste After button at the top of the page.
The Cut And Paste window reloads, and you now see the Paragraph:Paragraph1 line immediately after the Click On Graph Button:MyClickButton line. Return to the CALUMATH Page Maker and click View Page to view the page.
If you want, you can add a line break that appears before the MyClickButton, however we won't do this.
Click Edit Page in the CALUMATH Page Maker and click the MyClickButton line. When you are returned to the menu where the button was created, select invisible for Visibility. This ensures that the button will not be visible when the page is loaded.
We now do something very common in CALUMATH. We will add to the Button Action for MyButton to make MyButton invisible when it is clicked and to make MyClickButton visible when it is clicked.
Select Buttons and Boxes from the Main Menu and Add To Button Action from the Sub-Menu. Click the Continue Button. Click Finish Button Action and close any windows that pop up.
Relect Visibility from the Main Menu and Hide and Unhide from the Sub-Menu. Click the Continue Button. Select CM_ParentObject.MyButton as the Object and select invisible in Visibility. Click the Finish Hide And Unhide button. Select OK and Close respectively in the windows that pop up.
Repeat the above step, this time selecting H.MyClickButton as the Object and select visible in Visibility. Click the Finish Hide and Unhide button. Click Cancel when asked if we want to continue the Button Action. Close the window that pops up.
View your page. When you click Click Me, the button should disappear and the Continue button should appear. This could have all been planned out to be smoother, for example, the buttons could be right next to each other, however I wanted to give you the chance to do a variety of tasks, for example Cut and Paste or use Insert Options and Insert Target even when it was not the most appropriate thing to do.
The Click On Graph Button has two button actions that can be created for it: one when the button is clicked and one when the graph is clicked. So there are two "containers" to be filled.
A typical thing to do with a Click On Graph Button when it is clicked is to have a small pop-up window appear to give them the instructions that they should click on the graph. This type of pop-up instruction window is called and alert.
Select Buttons and Boxes from the Main Menu and select Button Action from the Sub-Menu. Click the Continue button. Select H.MyClickButton for Button and When Button Clicked for Timing of Event. Click Finish Button Action. Close the window that pops up.
Select Text and Html from the Main Menu and Alert from the Sub-Menu. Click the Continue button. Type Click on the axes three times and points will appear where you clicked. in the Alert Text box. Click the Finish Alert button. Cancel continuing the Button Action and close the window that pops up.
We now construct the button action for when the graph is clicked. Select Buttons and Boxes from the Main Menu and select Button Action from the Sub-Menu. Click the Continue button. Select H.MyClickButton for Button and When Graph Is Clicked for Timing of Event. Click Finish Button Action. Close the window that pops up.
The things we add to this Button Action will be done when the graph is clicked. The first thing we should do is name the point that is clicked. This gives us access to the point and to its coordinates. Select Buttons and Boxes from the Main Menu and Name Clicked Point from the Sub-Menu. Click the Continue button. Enter UserPoint for Clicked Point Name. Click the Finish Name Clicked Point button.
The coordinates of the point the user clicks will now be called UserPoint. UserPoint.x will automatically be the x coordinate and UserPoint.y will automatically be the y coordinate.
Click OK to continue the Button Action and close the pop up window.
We now plot the point where the user clicked. Select Axes and Graphs from the Main Menu and Plot A Point from the Sub-Menu.
Enter UserPoint.x for the X Coordinate and UserPoint.y for the Y Coordinate. Select yes in Display Equation. Click the Finish Point Plot button.
Cancel continuing the Button Action and close the window that pops up. View your page.